<template>
  <div class="bg-image w-full h-screen relative">
    <div
      class="shadow-2xl px-12 py-14 mx-auto w-max h-max bg-white rounded-xl absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
    >
      <div>
        <el-link
          class=""
          style="position: absolute; left: 20px; top: 20px"
          :underline="false"
          type="info"
          @click="router.go(-1)"
          ><el-icon :size="16" color="#91A0B5">
            <ArrowLeftBold />
          </el-icon>
          返回</el-link
        >
      </div>
      <h3 class="text-center mb-11 text-xl text-gray-600">用户注册</h3>
      <div>
        <div class="mb-2 mb-6">
          <el-input
            class="rounded-lg inp"
            size="large"
            :prefix-icon="User"
            v-model="param.username"
            style="width: 294px"
            placeholder="账号"
          />
        </div>
        <div class="mb-2 mb-6 relative">
          <el-input
            class="rounded-lg inp"
            :prefix-icon="Lock"
            size="large"
            type="password"
            show-password
            v-model="param.password"
            style="width: 294px"
            placeholder="密码"
          />
          <span
            v-if="pwdTip1"
            class="absolute left-0 top-full pt-px text-gray-400 text-xs text-red-500"
            >{{pwdTip1}}</span
          >
        </div>
        <div class="mb-2 mb-6 relative">
          <el-input
            class="rounded-lg inp"
            :prefix-icon="Lock"
            size="large"
            type="password"
            show-password
            v-model="confirmPwd"
            style="width: 294px"
            placeholder="确认密码"
          />
          <span
            v-if="pwdTip2"
            class="absolute left-0 top-full pt-px text-gray-400 text-xs text-red-500"
            >{{pwdTip2}}</span
          >
        </div>
        <div class="mb-2 mb-6">
          <el-input
            class="rounded-lg inp"
            :prefix-icon="Key"
            size="large"
            v-model="captchaTxt"
            style="width: 184px"
            placeholder="验证码"
          />
          <img
            @click="getCaptcha"
            :src="captchaImg"
            alt=""
            style="
              width: 100px;
              height: 38px;
              display: inline;
              margin-left: 10px;
              box-shadow: 0 0 0 1px #dcdfe6;
              border-radius: 8px;
            "
          />
        </div>
      </div>

      <el-button
        :class="[
          'w-full',
          'text-lg',
          buttonDisabled ? 'disabled-save-btn' : 'save-btn',
        ]"
        size="large"
        :type="buttonDisabled ? 'info' : 'primary'"
        @click="buttonDisabled ? null : subRegister()"
        >注册</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { captcha, register } from "@/api/api";
import { User, Lock, ArrowLeftBold, Key } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const param = ref({ username: "", password: "" });
const confirmPwd = ref("");
const captchaImg = ref("");
const captchaTxt = ref(""); //验证码

// 按钮禁用状态 判断那些输入框是否为空，为空返回true
const buttonDisabled = computed(() => {
  return (
    !param.value.username.trim() ||
    !param.value.password.trim() ||
    !captchaTxt.value.trim() ||
    !confirmPwd.value.trim()
  );
});

const pwdTip1 = computed(() => {
  if (
    (param.value.password.length < 6 && param.value.password.length != 0) ||
    param.value.password.length > 16
  ) {
    return "请输入6~16位的密码";
  }
  return false;
});

const pwdTip2 = computed(() => {
  if (
    (confirmPwd.value.length < 6 && confirmPwd.value.length != 0) ||
    confirmPwd.value.length > 16
  ) {
    return "请输入6~16位的密码";
  }
  return false;
});

const getCaptcha = () => {
  captcha().then((res) => {
    // 将ArrayBuffer转换为Blob对象
    const blob = new Blob([res], { type: "image/jpeg" });
    // 将Blob转换为base64编码的URL
    const reader = new FileReader();
    reader.onloadend = () => {
      captchaImg.value = reader.result;
    };
    reader.readAsDataURL(blob);
  });
};

const subRegister = () => {
  if (param.value.password != confirmPwd.value) {
    ElMessage.error("两次密码不一致");
    return;
  }
  register(param.value, captchaTxt.value).then((res) => {
    if (res.code == 401) {
      getCaptcha();
      ElMessage.error("验证码错误");
      return;
    }
    if (res.code == 200) {
      console.log(11111111);
      ElMessage.success("注册成功，请登录");
      param.value.username = "";
      param.value.password = "";
      confirmPwd.value = "";
      captchaTxt.value = "";
      getCaptcha();
      router.push("/login");
    }
  });
};

onMounted(() => {
  getCaptcha();
});
</script>

<style scoped>
.bg-image {
  background-image: url("@/assets/img/login_bg.png");
  background-size: cover; /* 根据需要调整 */
  background-position: center;
  max-height: 1080px !important;
}
.inp :deep(.el-input__wrapper) {
  border-radius: 8px; /* 你想要的圆角大小 */
}

.el-link {
  text-decoration: none;
}

.el-link:hover {
  color: #91a0b5;
}

/* .save-btn:hover {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
} */
.disabled-save-btn:hover {
  background-color: #909399;
  border-color: #909399;
  color: #fff;
}
</style>
